<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133296718-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-133296718-1');
    </script>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="icon" href="../../images/webpage/icon.png">

    <title>Princess Connect! Re:Dive - Quest Helper | Statistics</title>
    <meta name="title" content="Princess Connect! Re:Dive - Quest Helper | Statistics"/>

    <!-- META DATA -->
    <meta name="description" content="Equipment usage statistics for 'Princess Connect! Re:Dive' （プリンセスコネクト! Re:Dive）, based on the data used in priconne-quest-helper.">
    <meta name="author" content="S'pugn">
    <meta name="keywords" content="Princess Connect Re:Dive, プリンセスコネクト! Re:Dive, Quest Helper, S'pugn">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- OPEN GRAPH / FACEBOOK META DATA -->
    <meta property="og:title" content="Princess Connect! Re:Dive - Quest Helper | Statistics"/>
    <meta property="og:description" content="Equipment and ingredient usage statistics for 'Princess Connect! Re:Dive' （プリンセスコネクト! Re:Dive）, based on the data used in priconne-quest-helper."/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content="https://raw.githubusercontent.com/Expugn/priconne-quest-helper/master/images/webpage/icon.png"/>
    <meta property="og:image:width" content="64"/>
    <meta property="og:image:height" content="64"/>
    <meta property="og:url" content="https://expugn.github.io/priconne-quest-helper/pages/statistics/"/>
    <meta property="og:locale" content="en_US"/>

    <!-- TWITTER META DATA -->
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:site" content="@eSpugn"/>
    <meta name="twitter:creator" content="@eSpugn"/>
    <meta name="twitter:title" content="Princess Connect! Re:Dive - Quest Helper | Statistics"/>
    <meta name="twitter:description" content="Equipment and ingredient usage statistics for 'Princess Connect! Re:Dive' （プリンセスコネクト! Re:Dive）, based on the data used in priconne-quest-helper."/>

    <!-- SCRIPTS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="../../vendor/modernizr/modernizr-custom.js"></script> <!-- WEBP CHECK -->
    <script src="../../scripts/priconne-data.js"></script>

    <!-- CSS STYLE SHEETS -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../css/spritesheet.css">
    <link rel="stylesheet" href="../../css/data.css">
</head>
<body>
<noscript>
    <style type="text/css">
        div {display: none;}
        hr {display: none;}
        footer {display: none;}
    </style>
    <h1 style="color: white; text-align:center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-shadow: 1px 1px 2px #000000;">
        <span style="color: orangered;">Pudding doesn't taste good without JavaScript...</span>
        <br><br>
        <span style="color: deepskyblue;">Princess Connect Re:Dive Quest Statistics</span> cannot function without JavaScript.
        <br><br>
        <span style="color: #ffdf73;">Please enable JavaScript in your browser to continue.</span>
    </h1>
</noscript>

<div>
    <h1 class="title main_title">Princess Connect! Re:Dive - Quest Helper</h1>
    <h2 class="title sub_title">Statistics</h2>
    <h1 class="title simple_title">priconne-quest-helper &boxv; Statistics</h1>
</div>

<hr>

<div id="rarity-settings" hidden>
    <div id="ignore-settings">
        <button id="ignore-button-common" class="webpage webpage-Placeholder_Common" title="Ignore Common Items" onclick="toggle_rarity(this)"></button>
        <button id="ignore-button-copper" class="webpage webpage-Placeholder_Copper" title="Ignore Copper Items" onclick="toggle_rarity(this)"></button>
        <button id="ignore-button-silver" class="webpage webpage-Placeholder_Silver" title="Ignore Silver Items" onclick="toggle_rarity(this)"></button>
        <button id="ignore-button-gold" class="webpage webpage-Placeholder_Gold" title="Ignore Gold Items" onclick="toggle_rarity(this)"></button>
        <button id="ignore-button-purple" class="webpage webpage-Placeholder_Purple" title="Ignore Purple Items" onclick="toggle_rarity(this)"></button>
        <button id="ignore-button-red" class="webpage webpage-Placeholder_Red" title="Ignore Red Items" onclick="toggle_rarity(this)"></button>
    </div>
    <div id="data-settings">
        <button id="version-history-button" onclick="toggle_version_history_display()" disabled>Version History</button>
        <br>
        <label for="data-type-select" hidden>Data Type Select</label>
        <select id="data-type-select" onchange="change_display()">
            <option value="equipment-data">Equipment Usage</option>
            <option value="ingredient-data">Ingredient Usage</option>
        </select>
        <br>
        <label for="equipment-data-type" hidden>Equipment Data Type</label>
        <select id="equipment-data-type" onchange="change_data()">
            <option value="equipment-data-current">Current Equipment Data (After 2019.08.31)</option>
            <option value="equipment-data-legacy">Legacy Equipment Data (Before 2019.08.31)</option>
        </select>
    </div>
    <hr>
</div>

<div id="version-settings" hidden>
    <div style="margin: auto; text-align: center;">
        <button onclick="toggle_version_history_display()">Back to Statistics</button>
        <br><br>
        <label>
            Show Fragment History
            <input style="position: relative; top: 1px;" type="checkbox" onchange="toggle_version_history_type()">
        </label>
        <br><br>
        <div style="display: inline-block;">
            <label for="version-after" hidden>Version After</label><select id="version-after" onchange="document.getElementById('version-after-link').href = 'https://github.com/Expugn/priconne-quest-helper/commit/' + document.getElementById('version-after').value;"></select>
            <br>
            <a id="version-after-link" href="" target="_blank" class="commit-hyperlink">
                Commit Information
            </a>
        </div>
        <span id="version-arrow" style="padding-right: 10px; padding-left: 10px;"> ← </span>
        <div style="display: inline-block;">
            <label for="version-before" hidden>Version Before</label><select id="version-before" onchange="document.getElementById('version-before-link').href = 'https://github.com/Expugn/priconne-quest-helper/commit/' + document.getElementById('version-before').value;"></select>
            <br>
            <a id="version-before-link" href="" target="_blank" class="commit-hyperlink">
                Commit Information
            </a>
        </div>
        <br><br>
        <button onclick="compare_versions()">Compare Versions</button>
    </div>
    <hr>
</div>

<div id="all-data" hidden>
    <div id="equipment-data">
        <h2 class="category-header">Equipment Usage Rankings</h2>
        <div class="top-three">
            <div class="first-place">
                <i class="placement-image" title="1st Place"></i>
                <div class="item-sprite"></div>
                <div class="top-three-item-text" hidden></div>
            </div>
            <br class="top-three-spacing-1">
            <div class="second-place">
                <i class="placement-image" title="2nd Place"></i>
                <div class="item-sprite"></div>
                <div class="top-three-item-text" hidden></div>
            </div>
            <br class="top-three-spacing-2">
            <div class="third-place">
                <i class="placement-image" title="3rd Place"></i>
                <div class="item-sprite"></div>
                <div class="top-three-item-text" hidden></div>
            </div>
        </div>
        <div id="all-equipment" hidden></div>
    </div>
    <div id="ingredient-data" hidden>
        <h2 class="category-header">Ingredient Usage Rankings</h2>
        <div class="top-three">
            <div class="first-place">
                <i class="placement-image" title="1st Place"></i>
                <div class="item-sprite"></div>
                <div class="top-three-item-text" hidden></div>
            </div>
            <div class="second-place">
                <i class="placement-image" title="2nd Place"></i>
                <div class="item-sprite"></div>
                <div class="top-three-item-text" hidden></div>
            </div>
            <div class="third-place">
                <i class="placement-image" title="3rd Place"></i>
                <div class="item-sprite"></div>
                <div class="top-three-item-text" hidden></div>
            </div>
        </div>
        <div id="all-ingredients" hidden>
            <table id="all-ingredients-sorted" class="center-table white-background"></table>
        </div>
    </div>
</div>
<div id="version-history" hidden>
    <div id="equipment-history"></div>
    <div id="fragment-history" hidden></div>
</div>
<hr>
</body>

<footer>
    <p class="footer">
        Made With <span class="heart-red">❤</span> By S'pugn
        <i class="footer webpage webpage-HAhaa"></i>
    </p>
    <p class="footer" id="stats-footer" hidden>
        <span id="stats"></span>
    </p>
</footer>

<script>
    function get_item_sprite_class(item_name) {
        return "is__" + item_name.replace("'", "").replace(/\W/g, '-').toLowerCase().replace('---', '-');
    }

    const display = Object.freeze({
        EQUIPMENT: 'equipment-data',
        INGREDIENT: 'ingredient-data'
    });
    const row_length = 22;
    let ignored_rarities = {
        "common": !$("#ignore-button-common").hasClass("disabled"),
        "copper": !$("#ignore-button-copper").hasClass("disabled"),
        "silver": !$("#ignore-button-silver").hasClass("disabled"),
        "gold": !$("#ignore-button-gold").hasClass("disabled"),
        "purple": !$("#ignore-button-purple").hasClass("disabled"),
        "red": !$("#ignore-button-red").hasClass("disabled")
    };
    let equipment_sorted, ingredient_sorted, current_display = display.EQUIPMENT;
    window.onload = function () {
        equipment_data.read_data(function (success) {
            if (success)
                character_data.read_data(function (success) {
                    if (success) {
                        build_data();
                        setup_version_history();
                        document.getElementById("all-data").hidden = false;
                    }
                });
        });
    };

    function build_data() {
        let equipment = {}, ingredient = {};
        compile_equipment();
        compile_ingredient();
        sort();
        build_statistics_html(display.EQUIPMENT);
        build_statistics_html(display.INGREDIENT);
        update_stats();
        document.getElementById("rarity-settings").hidden = false;
        document.getElementById("all-equipment").hidden = false;
        document.getElementById("all-ingredients").hidden = false;

        function compile_equipment() {
            const char_data = character_data.data();
            for (const unit_id in char_data) {
                for (let i = 1, j = character_data.max_rank() ; i <= j ; i++) {
                    const rank_items = char_data[unit_id]["rank_" + i];
                    for (let k = 0, l = rank_items.length ; k < l ; k++) {
                        const item_name = rank_items[k];
                        if (item_name === "") {
                            continue;
                        }

                        if (equipment.hasOwnProperty(item_name)) {
                            equipment[item_name] += 1;
                        }
                        else {
                            equipment[item_name] = 1;
                        }
                    }
                }
            }
        }

        function compile_ingredient() {
            for (const item_name in equipment) {
                const recipe = equipment_data.recipe.get(item_name, equipment[item_name]);
                for (const comp_name in recipe) {
                    const comp_amount = recipe[comp_name];
                    if (ingredient.hasOwnProperty(comp_name)) {
                        ingredient[comp_name] += comp_amount;
                    }
                    else {
                        ingredient[comp_name] = comp_amount;
                    }
                }
            }
        }

        function sort() {
            equipment_sorted = Object.keys(equipment)
                .map(i => [i, equipment[i]])
                .sort((a, b) => b[1] - a[1]);
            ingredient_sorted = Object.keys(ingredient)
                .map(i => [i, ingredient[i]])
                .sort((a, b) => b[1] - a[1]);
        }
    }

    function build_statistics_html(display_type = display.EQUIPMENT) {
        const equip_data = equipment_data.data(),
              is_equipment_display = display_type === display.EQUIPMENT,
              elem = document.getElementById(is_equipment_display ? "all-equipment" : "all-ingredients"),
              sorted_data = (is_equipment_display ? equipment_sorted : ingredient_sorted);
        let counter = 0;

        elem.innerHTML = "";

        // RESET TOP 3
        let current_display = document.getElementById(is_equipment_display ? "equipment-data" : "ingredient-data"),
            first = current_display.querySelector("div.first-place"),
            second = current_display.querySelector("div.second-place"),
            third = current_display.querySelector("div.third-place"),
            first_image = first.querySelector("div.item-sprite"),
            second_image = second.querySelector("div.item-sprite"),
            third_image = third.querySelector("div.item-sprite"),
            first_amount = first.querySelector("div.top-three-item-text"),
            second_amount = second.querySelector("div.top-three-item-text"),
            third_amount = third.querySelector("div.top-three-item-text");
        if (first_image.title !== "") {
            first_image.classList.remove(get_item_sprite_class(first_image.title));
            first_image.title = "";
            first_amount.hidden = true;
        }
        if (second_image.title !== "") {
            second_image.classList.remove(get_item_sprite_class(second_image.title));
            second_image.title = "";
            second_amount.hidden = true;
        }
        if (third_image.title !== "") {
            third_image.classList.remove(get_item_sprite_class(third_image.title));
            third_image.title = "";
            third_amount.hidden = true;
        }

        sorted_data.forEach(function (e) {
            const item_name = e[0], amount = e[1];
            if (ignored_rarities[equip_data[(is_equipment_display ? item_name : item_name.replace(" Fragment", ""))]["rarity"]]) {
                if (counter < 3) {
                    // UPDATE TOP THREE ITEMS
                    let elem = document.getElementById(is_equipment_display ? "equipment-data" : "ingredient-data");
                    switch (counter) {
                        case 0:
                            elem = elem.querySelector("div.first-place");
                            break;
                        case 1:
                            elem = elem.querySelector("div.second-place");
                            break;
                        case 2:
                            elem = elem.querySelector("div.third-place");
                            break;
                    }
                    let top_image = elem.querySelector("div.item-sprite");
                    if (top_image.title !== "") {
                        top_image.classList.remove(get_item_sprite_class(top_image.title));
                    }
                    top_image.title = item_name;
                    top_image.classList.add(get_item_sprite_class(item_name));
                    const amount_text = elem.querySelector("div.top-three-item-text");
                    amount_text.innerText = amount;
                    amount_text.hidden = false;
                }
                else {
                    // ADD OTHER ITEMS
                    const bottom_counter = counter - 3;
                    if (bottom_counter % row_length === 0 && bottom_counter !== 0) {
                        elem.appendChild(document.createElement("br"));
                    }
                    const item_elem = document.createElement("div"),
                        amount_elem = document.createElement("span");
                    item_elem.classList.add("item-sprite", get_item_sprite_class(item_name));
                    item_elem.title = "#" + (counter + 1) + "\n" + item_name;
                    amount_elem.classList.add("amount");
                    amount_elem.innerText = amount;

                    item_elem.appendChild(amount_elem);
                    elem.appendChild(item_elem);
                }
                counter++;
            }
        });
    }

    function toggle_rarity(element) {
        element.classList.toggle("disabled");
        ignored_rarities = {
            "common": !$("#ignore-button-common").hasClass("disabled"),
            "copper": !$("#ignore-button-copper").hasClass("disabled"),
            "silver": !$("#ignore-button-silver").hasClass("disabled"),
            "gold": !$("#ignore-button-gold").hasClass("disabled"),
            "purple": !$("#ignore-button-purple").hasClass("disabled"),
            "red": !$("#ignore-button-red").hasClass("disabled")
        };

        let counter = 0;
        for (const rarity in ignored_rarities) {
            counter += (!ignored_rarities[rarity] ? 1 : 0);
        }

        if (counter === Object.keys(ignored_rarities).length) {
            toggle_rarity(element);
        }
        else {
            build_statistics_html(display.EQUIPMENT);
            build_statistics_html(display.INGREDIENT);
        }
    }

    function change_display() {
        const selected = document.getElementById("data-type-select").value;
        document.getElementById(current_display).hidden = true;
        document.getElementById(selected).hidden = false;
        current_display = selected;
    }

    function update_stats() {
        document.getElementById("stats").innerHTML = "Data From: <span>" + Object.keys(character_data.data()).length + "</span> Characters (Rank 1 to Rank " + character_data.max_rank() + ")";
        document.getElementById("stats-footer").hidden = false;
    }

    function change_data() {
        const equipment_data_type = document.getElementById("equipment-data-type").value,
              character_data_type = (equipment_data_type === equipment_data.version.CURRENT ?
                  character_data.version.CURRENT :
                  character_data.version.LEGACY);
        equipment_data.set_loaded_version(equipment_data_type);
        character_data.set_loaded_version(character_data_type);

        equipment_data.read_data(function (success) {
            if (success)
                character_data.read_data(function (success) {
                    if (success)
                        build_data();
                });
        });
    }

    function setup_version_history()
    {
        // NUMBER BETWEEN () IS THE AMOUNT OF ENTRIES OBTAINED.
        // ENTRY AMOUNT MAX IS 30
        const ENTRY_AMOUNT = (5) - 1;
        let select_html = "";

        get_raw_urls(function (file_json) {
            let counter = 0;
            // GO THROUGH RAW URLS OBTAINED FROM get_raw_urls() AND BUILD version_history_json
            for (const [sha, obj] of Object.entries(file_json)) {
                // ADD SELECT OPTION
                select_html += "<option value='" + sha + "'>" + new Date(obj["date"]).toDateString() + "</option>";

                if (counter === 0) {
                    document.getElementById("version-after-link").href = "https://github.com/Expugn/priconne-quest-helper/commit/" + sha;
                    document.getElementById("version-before-link").href = "https://github.com/Expugn/priconne-quest-helper/commit/" + sha;
                }

                // GO THROUGH EQUIPMENT DATA OF SPECIFIC COMMIT
                get_items(obj["raw_url"], function (items_json) {
                    // ADD ITEMS
                    file_json[sha]["items"] = items_json;

                    // WHEN ENOUGH DATA HAS BEEN COLLECTED...
                    // SETUP ELEMENTS
                    if (counter++ === ENTRY_AMOUNT) {
                        // SETUP ELEMENTS
                        document.getElementById("version-history-button").disabled = false;
                        document.getElementById("version-after").innerHTML = select_html;
                        document.getElementById("version-before").innerHTML = select_html;

                        // STORE VERSION HISTORY FOR LATER USE
                        version_history_json = file_json;
                    }
                });
            }
        });

        function get_raw_urls(callback) {
            // FIND ANY COMMITS THAT HAVE MODIFIED data/character_data.json
            const commits_url = "https://api.github.com/repos/Expugn/priconne-quest-helper/commits?path=data/character_data.json";
            let file_json = {};
            $.ajax({
                url: commits_url,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $.each(response, function (index, obj) {
                        file_json[obj["sha"]] = {};
                        file_json[obj["sha"]]["raw_url"] = "https://raw.githubusercontent.com/Expugn/priconne-quest-helper/" + obj["sha"] + "/data/character_data.json";
                        file_json[obj["sha"]]["date"] = obj["commit"]["author"]["date"];
                        file_json[obj["sha"]]["items"] = {};

                        // END LOOP WHEN INDEX = ENTRY_AMOUNT (ENOUGH COMMIT DATA HAS BEEN COLLECTED)
                        if (index === ENTRY_AMOUNT) {
                            return false;
                        }
                    });

                    // RETURN RAW URLS TO CALLBACK
                    callback(file_json);
                },
                error: function(e) {
                    console.log("FAILED TO GET VERSION HISTORY! Page refresh may be necessary.");
                    document.getElementById("version-history-button").innerHTML = "FAILED TO GET VERSION HISTORY<br>Refresh the page to try again.";
                }
            });
        }

        function get_items(raw_url, callback)
        {
            let items_json = {};
            $.ajax({
                url: raw_url,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $.when(
                        $.each(response, function(i, character_obj) {
                            for (let i = 1 ; character_obj["rank_" + i] !== undefined ; i++) {
                                character_obj["rank_" + i].forEach(function (item_name) {
                                    // CHECK IF ITEM IS EMPTY OR NOT
                                    if (item_name !== "") {
                                        // CHECK IF ENTRY EXISTS, IF NOT THEN CREATE NEW ENTRY
                                        if (items_json[item_name] !== undefined) {
                                            items_json[item_name]++;
                                        }
                                        else {
                                            items_json[item_name] = 1;
                                        }
                                    }
                                });
                            }
                        })
                    ).then(function () {
                        callback(items_json);
                    });
                },
                error: function(e) {
                    console.log("FAILED TO GET ITEMS FROM RAW URLS! Page refresh may be necessary.");
                    document.getElementById("version-history-button").innerHTML = "FAILED TO GET VERSION HISTORY<br>Refresh the page to try again.";
                }
            });
        }
    }

    function compare_versions()
    {
        let equipment_html = "";
        let ingredient_html = "";
        const version_1 = version_history_json[document.getElementById("version-after").value];
        const version_2 = version_history_json[document.getElementById("version-before").value];
        let items = {...version_2["items"], ...version_1["items"]};
        let ingredients = new Map();

        // DETERMINE DIFFERENCES
        Object.entries(items).forEach(function (item) {
            const item_name = item[0];
            let difference = items[item_name] - (version_2["items"].hasOwnProperty(item_name) ? version_2["items"][item_name] : 0);
            let is_new_item = (version_1["items"].hasOwnProperty(item_name) && !version_2["items"].hasOwnProperty(item_name)) ||
                (!version_1["items"].hasOwnProperty(item_name) && version_2["items"].hasOwnProperty(item_name));
            if (difference !== 0 || is_new_item) {
                if (is_new_item && (!version_1["items"].hasOwnProperty(item_name) && version_2["items"].hasOwnProperty(item_name))) {
                    // ITEM EXISTS IN VERSION_2 BUT NOT VERSION_1, MEANING VERSION_2 IS PROBABLY A MORE RECENT VERSION.
                    items[item_name] = -(version_2["items"][item_name]);
                }
                else {
                    // THERE IS A DIFFERENCE IN AMOUNTS, ADD TO ITEMS.
                    items[item_name] = difference;
                }
            }
            else {
                // NO DIFFERENCE DETECTED, REMOVE FROM LIST
                delete items[item_name];
            }
        });

        if (Object.keys(items).length === 0 && items.constructor === Object) {
            // NO CHANGES BETWEEN VERSIONS DETECTED
            const no_changes_detected_html = "<div style='margin: -10px auto 20px; text-align: center;'><br><span>No Changes Detected!</span></div>";
            document.getElementById("equipment-history").innerHTML = no_changes_detected_html;
            document.getElementById("fragment-history").innerHTML = no_changes_detected_html;
        }
        else {
            // SORT ITEMS (MOST -> LEAST)
            let items_sorted = Object.keys(items).sort(function (a, b) {
                return items[b]-items[a];
            });

            // MAKE EQUIPMENT HTML
            items_sorted.forEach(function (item_name) {
                const difference = items[item_name];
                equipment_html += "<div class='item-div" + (difference > 0 ? " green-background" : " red-background") + "'>";
                equipment_html += "<i class='item-sprite " + get_item_sprite_class(item_name) + "' title=\"" + item_name + "\"></i>";
                equipment_html += "<span class='version-item-amount'>" + ((difference > 0) ? "+ " : "- ") + Math.abs(difference) + "</span>";
                equipment_html += "</div>";

                // COLLECT AND STORE RECIPE DATA FOR LATER USE
                let item_recipe = equipment_data.recipe.get(item_name, Math.abs(difference));
                for (const ingredient_name in item_recipe) {
                    const ingredient_amount = item_recipe[ingredient_name];
                    if (ingredients.has(ingredient_name)) {
                        if (difference > 0) {
                            ingredients.set(ingredient_name, ingredients.get(ingredient_name) + ingredient_amount);
                        }
                        else {
                            ingredients.set(ingredient_name, ingredients.get(ingredient_name) + (-Math.abs(ingredient_amount)));
                        }
                    }
                    else {
                        if (difference > 0) {
                            ingredients.set(ingredient_name, ingredient_amount);
                        }
                        else {
                            ingredients.set(ingredient_name, (-Math.abs(ingredient_amount)));
                        }
                    }
                }
            });

            // BUILD INGREDIENT HTML
            new Map([...ingredients.entries()].sort((a, b) => b[1] - a[1])).forEach(function (ingredient_amount, ingredient_name) {
                if (ingredient_amount !== 0) {
                    ingredient_html += "<div class='item-div" + (ingredient_amount > 0 ? " green-background" : " red-background") + "'>";
                    ingredient_html += "<i class='item-sprite " + get_item_sprite_class(ingredient_name) + "' title=\"" + ingredient_name + "\"></i>";
                    ingredient_html += "<span class='version-item-amount'>" + ((ingredient_amount > 0) ? "+ " : "- ") + Math.abs(ingredient_amount) + "</span>";
                    ingredient_html += "</div>";
                }
            });
            document.getElementById("equipment-history").innerHTML = equipment_html;
            document.getElementById("fragment-history").innerHTML = ingredient_html;
        }
    }

    function toggle_version_history_display()
    {
        document.getElementById("rarity-settings").hidden = !document.getElementById("rarity-settings").hidden;
        document.getElementById("version-settings").hidden = !document.getElementById("version-settings").hidden;
        document.getElementById("all-data").hidden = !document.getElementById("all-data").hidden;
        document.getElementById("version-history").hidden = !document.getElementById("version-history").hidden;
    }

    function toggle_version_history_type() {
        document.getElementById("equipment-history").hidden = !document.getElementById("equipment-history").hidden;
        document.getElementById("fragment-history").hidden = !document.getElementById("fragment-history").hidden;
    }
</script>

</html>